<template>
  <el-dialog title="店铺信息" v-model="editVisible" width="70%" top="2vh" draggable @closed="closedFormDialog">
    <div class="container">
      <div class="mb10">
        <el-text class="mx-1"> 查询条件：</el-text>
      </div>
      <el-row :gutter="10">
        <el-col :xl="6" :lg="6" :md="12" :sm="24">
          <el-input v-model.trim="searchCondition.store_name" placeholder="店铺名称" clearable></el-input>
        </el-col>
        <el-col :xl="6" :lg="6" :md="12" :sm="24">
          <el-input v-model.trim="searchCondition.user_name" placeholder="联系人名称" clearable></el-input>
        </el-col>
        <el-col :xl="6" :lg="6" :md="12" :sm="24">
          <el-input v-model.trim="searchCondition.store_phone" placeholder="手机号" clearable></el-input>
        </el-col>
        <el-col :xl="6" :lg="6" :md="12" :sm="24">
          <el-space wrap>
            <el-button type="success" :icon="Search" :disabled="disabledbtn" @click="searchInfo">搜索</el-button>
            <el-button type="warning" :icon="Refresh" :disabled="disabledbtn" @click="resetSearch">重置</el-button>
          </el-space>
        </el-col>
      </el-row>
      <div class="mb10">
        <el-text class="mx-1"> 查询结果：</el-text>
      </div>
      <el-table :data="tableList" border class="table" row-key="id" ref="multipleTableRef" v-loading="loading" :reserve-selection="true" @row-dblclick="rowDblclick">
        <el-table-column type="index" align="center"> </el-table-column>
        <el-table-column type="selection" width="55" align="center"></el-table-column>
        <el-table-column prop="store_name" label="店铺名称" align="center"></el-table-column>
        <el-table-column prop="user_name" label="联系人" align="center"></el-table-column>
        <el-table-column prop="store_phone" label="手机号" align="center"></el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          background
          @update:current-page="handleCurrentChange"
          @update:page-size="handleSizeChange"
          layout="total, sizes, prev, pager, next, jumper"
          :page-size="searchCondition.size"
          :current-page="searchCondition.current"
          :page-sizes="[10, 20, 30, 40, 50, 100]"
          :total="total"
          :hide-on-single-page="false">
        </el-pagination>
      </div>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleCancelDialog">取 消</el-button>
        <el-button type="primary" :disabled="disabledbtn" @click="handleSelectedData">确 定 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { Search, Refresh } from "@element-plus/icons-vue";
import { useState } from "@/hooks/useState.ts";
import type { ISearchOtherStore, ISearchStore, IStoreInfoList } from "@/types/storeManager/store";
import { getStoreInfo } from "@/utils/api/store";
interface Props {
  selectNumber?: "single" | "more";
  otherSearchCondition?: ISearchOtherStore;
}
const { selectNumber = "single", otherSearchCondition } = defineProps<Props>();
const { disabledbtn, loading, toggleState } = useState();

const editVisible = defineModel<boolean>("editVisible", { required: true });
const emit = defineEmits<{
  handleSuccess: [arr: IStoreInfoList[]];
}>();
const multipleTableRef = useTemplateRef("multipleTableRef"); /* 列表组件的引用 */

const total = ref(0);
const searchCondition = reactive<ISearchStore>({
  store_name: "",
  store_state: "",
  shop_level: "",
  settled_status: "",
  deposit: "",
  sort_by_store_settled: "",
  staff_uid: "",
  store_phone: "",
  user_name: "",
  contract_review: "",
  province_id: "",
  city_id: "",
  district: "",
  support_by_store: "",
  start_time: "",
  end_time: "",
  without_revisit_days: "",
  is_first_order: "",
  without_order_days: "",
  settle_in_interest_points: [],
  online_promotion: [],
  customer_acquisition_channel: [],
  materials: [],
  customer_action: [],
  rent_staff_uid: [],
  support_all_mobile: [],
  size: 10,
  current: 1
});
const tableList = ref<Array<IStoreInfoList>>([]);
onMounted(() => {
  // getTableInfo();
});
/*  */
watch(
  () => editVisible.value,
  newValue => {
    if (newValue) {
      /* 初始化数据 */
      resetSearch();
    }
  }
);
// 关闭模态框
function closedFormDialog() {
  handleCancelDialog();
}

/* 关闭模态框 */
function handleCancelDialog() {
  editVisible.value = false;
}

/* 选中数据 */
function handleSelectedData() {
  const selection = multipleTableRef.value!.store.states.selection.value;
  if (selection.length === 0) {
    ElMessage.warning("请至少选择一条数据");
    return;
  }
  if (selection.length > 1 && selectNumber == "single") {
    ElMessage.warning("至多选择一条数据");
    return;
  }
  emit("handleSuccess", selection);
  handleCancelDialog();
  multipleTableRef.value!.clearSelection();
}

/* 搜索 */
function searchInfo() {
  searchCondition.current = 1;
  searchCondition.size = 10;
  getTableInfo();
}

/**
 * 重置搜索内容
 */
function resetSearch() {
  searchCondition.store_name = "";
  searchCondition.store_state = "";
  searchCondition.shop_level = "";
  searchCondition.settled_status = "";
  searchCondition.deposit = "";
  searchCondition.sort_by_store_settled = "";
  searchCondition.staff_uid = "";
  searchCondition.store_phone = "";
  searchCondition.user_name = "";
  searchCondition.contract_review = "";
  searchCondition.province_id = "";
  searchCondition.city_id = "";
  searchCondition.district = "";
  searchCondition.support_by_store = "";
  searchCondition.start_time = "";
  searchCondition.end_time = "";
  searchCondition.without_revisit_days = "";
  searchCondition.is_first_order = "";
  searchCondition.without_order_days = "";
  searchCondition.rent_staff_uid = [];
  searchCondition.settle_in_interest_points = [];
  searchCondition.online_promotion = [];
  searchCondition.customer_acquisition_channel = [];
  searchCondition.materials = [];
  searchCondition.customer_action = [];
  searchCondition.current = 1;
  searchCondition.size = 10;
  getTableInfo();
}

/* 请求：获取表格中数据 */
function getTableInfo() {
  toggleState(true);
  getStoreInfo<IStoreInfoList, ISearchStore>({
    ...searchCondition,
    ...otherSearchCondition
  })
    .then(res => {
      tableList.value = res.result.data;
      total.value = res.result.total;
    })
    .finally(() => {
      toggleState(false);
    });
}

/* 显示第几页 */
function handleCurrentChange(val: number) {
  searchCondition.current = val;
  getTableInfo();
}

/* 每页显示几条 */
function handleSizeChange(val: number) {
  searchCondition.current = 1;
  searchCondition.size = val;
  getTableInfo();
}

/* 双击当前行 */
function rowDblclick(row: IStoreInfoList) {
  multipleTableRef.value!.toggleRowSelection(row);
}
</script>

<style lang="scss" scoped>
/* layout-布局 */
.el-col {
  border-radius: 4px;
}

.mb10 {
  margin-bottom: 10px;
}
/* 关键：列表右侧操作按钮的对其 */
:deep(.el-space__item) {
  line-height: 15px;
}

.el-button.is-text + .el-button.is-text {
  margin-left: 0;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

.handle-box {
  margin-bottom: 20px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}

.del-dialog-cnt {
  font-size: 16px;
  text-align: center;
}

.table {
  width: 100%;
  font-size: 14px;
}
.textAlignCenter {
  text-align: center;
}

/* 确定按钮的显示与隐藏 */
.displaybtn {
  display: none;
}

/* 提示图标设置 */
.icon-wzg-config {
  height: 30px;
  line-height: 30px;
}
</style>
